<template>
 <div>
     <city-header></city-header>
     <city-search :citylists="citylists"></city-search>
     <city-list :citylists="citylists" :letter="letter"></city-list>
     <!-- 侧栏字母 -->
     <city-alpha 
      :citylists="citylists"
      @change="letterChange"
     >
     </city-alpha>
 </div>
</template>

<script>
import axios from "axios";
import CityHeader from "./components/Header.vue";
import CitySearch from "./components/Search.vue";
import CityList from "./components/List.vue";
import CityAlpha from "./components/Alpha.vue";
export default {
  data() {
    return {
      citylists:[],
      letter:''
    };
  },
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlpha
  },
  methods: {
    getCityInfo() {
      var _this=this;
      axios.get("/api/city.json").then(function(res) {
        var res = res.data.data;
        _this.citylists=res.inland;
      
      });
    },
    letterChange(letter){
      this.letter=letter;
    }
  },
  mounted() {
    this.getCityInfo();
  }
};
</script>

<style scoped>
</style>
